// 定义变量
@themeColor: #34495e;
@clock_radius:400px;
@bgcolor: #f1f2f6;

// 带默认值定义一个类（less中得mixins）
.border_circle(@proportion: 50%){
  border-radius: @proportion;
}
//定位+translate实现盒子居中
//这个是为了将指针末端定位到圆心特别定义得一个类
.center_translate(@left_pos: 50%, @top_pos: 50%, @move_self: -50%) {
  position: absolute;
  left: @left_pos;
  top: @top_pos;
  transform: translate(-50%, @move_self);
}
//定位+ margin: auto 实现盒子居中
//因为指针需要旋转,会用到transform: rotate(),而上面定义的 居中类 已经有transform了,再定义旋转,会发生层叠.
//所以这里涉及到旋转的居中样式,就使用margin: auto得方式了
.center_margin {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

// 正式样式
body{
  margin: 0;
  padding: 0;
  background-color: #f7f1e3;
}


.clock{
  width: @clock_radius;
  height: @clock_radius;
  background-color: @bgcolor;
  border: 10px solid @themeColor;
  .border_circle(50%);
  box-shadow: 
  0 0 20px 0 rgba(0, 0, 0, .4),
  0 0 10px 0 rgba(0, 0, 0, .3) inset;
  // box-sizing: border-box;
  .center_translate; // (居中布局)
  z-index: 100;
  // 指针样式👇
  .pointer {
    width: 100%;
    height: 100%;
    background: url("../img/clock_pointer.png") no-repeat center center;
    background-size: 90%;
    // transition: all .8s;
    display: none;
    // 表盘中心
    .center {
      width: 25px;
      height: 25px;
      border: 3px solid @themeColor;
      .border_circle(50%);
      .center_translate;  // (居中布局)
      box-sizing: border-box;
      background-color: @bgcolor;
      z-index: 10;
    }
    // 时针
    .hour{
      width: @clock_radius;
      height: @clock_radius;
      border-radius: 50%;
      .center_margin;  // (居中布局)
      div{
        width: 7px;
        height: 30%;
        border-radius: 7px;
        background-color: #eb3b5a;
        .center_translate(50%,@clock_radius/2-(30/100*@clock_radius),0);  // (居中布局)
        filter: drop-shadow(0 0 1px  #000);

      }
    }
    // 分针
    .minute{
      width: @clock_radius;
      height: @clock_radius;
      border-radius: 50%;
      .center_margin;  // (居中布局)
      div {
        width: 4px;
        height: 40%;
        border-radius: 7px;
        background-color: #3867d6;
        .center_translate(50%,@clock_radius/2-(40/100*@clock_radius),0);  // (居中布局)
        filter: drop-shadow(0 0 1px #000);
        
      }
    }
    // 秒针
    .second{
      width: @clock_radius;
      height: @clock_radius;
      border-radius: 50%;
      .center_margin;  // (居中布局)
      div {
        width: 2px;
        height: 45%;
        border-radius: 7px;
        background-color: #a55eea;
        .center_translate(50%,@clock_radius/2-(45/100*@clock_radius),0);  // (居中布局)
        filter: drop-shadow(0 0 1px #000);

      }

    }

  }
}